import $ from 'jquery';
require('jquery.cookie');
import React from 'react';
import moment from 'moment';
import { render } from 'react-dom';

import dispatcher from 'lib/dispatcher';
import TimeStore from 'lib/stores/time-store';
import Tooltip from 'lib/components/tooltip.jsx';
import DateRangePicker from 'lib/components/DateRangePicker.jsx';

import AllApp from './apps.jsx';
import AllDashboard from './dashboards.jsx';
import UpgradeModal from './UpgradeModal.jsx';
import AllVersions from './versions.jsx';

BlueWare.isIOS = BlueWare.platform === 'iOS'
BlueWare.isAndroid = BlueWare.platform === 'Android'

export default class Layout extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      modalMounted: false,
      range: ((BlueWare.userStatus === 'FREE' || BlueWare.userStatus === 'PAIED') ? 7 : 15)*24*60*60*1000,
      // range: ((BlueWare.userStatus === 'FREE' || BlueWare.userStatus === 'PAIED') ? 7 : 30)*24*60*60*1000,
      value: TimeStore.getValue()
    }; // state
  } // constructor

  fullscreenHandler() {
    var enabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
    if (enabled) {
      var element = this.refs.root;
      if (this.fullscreen) {
        this.cancelFullScreen();
      } else {
        this.launchFullScreen(element);
      }

      this.fullscreen = !this.fullscreen;
    }
  }

  launchFullScreen(element) {
    if(element.requestFullscreen) {
      element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }

  cancelFullScreen() {
    if(document.exitFullscreen) {
      document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }

  componentDidMount(){
    if (!BlueWare.disabled) {
      var topswitch = document.getElementById('topswitch')
      if(topswitch){
        render(
          <AllApp
            appName={BlueWare.appName}
            appId={BlueWare.appId}
            moduleName={BlueWare.module_name}/>
        ,topswitch)
      }
      var dashboardswitch = document.getElementById('dashboardswitch')
      if(dashboardswitch){
        render(
          <AllDashboard
            dashboardName={BlueWare.dashboardName}
            dashboardId={BlueWare.dashboardId}
          />
        ,dashboardswitch)
      }
    } else {
      if (this.state.modalMounted === false) {
        UpgradeModal.mount();
        this.state.modalMounted = true;
      }
    }
  }

  onTimeChange(v) {
    var option = {
      path: '/'
    };

    if (document.domain.indexOf(BlueWare.siteDomain) > -1) {
      option.domain = BlueWare.siteDomain
    }

    $.cookie('spanTime', v.spanTime, option);
    $.cookie('endTime', v.endTime, option);

    dispatcher.dispatch({
      $type: 'SETTIME',
      data: v
    });

    this.props.onTimeChange(v)
  } // onTimeChange

  render() {
    if (BlueWare.disabled) {
      return null;
    }

    return (
      <div ref="root">
        <div className="page-title">
          <div className="navbar">
            <ul>
              {
                this.props.extra?(
                  <li>
                    {this.props.extra}
                  </li>
                ):null
              }
              {
                this.props.hideVersion?null:(
                  <li>
                    <AllVersions
                      appVersionName={BlueWare.appversion}
                      appVersionId={BlueWare.appVersionId}
                      moduleName={BlueWare.module_name}
                    />
                  </li>
                )
              }
              {
                this.props.hideTime?null:(
                  <li>
                    <DateRangePicker
                      range={ this.state.range }
                      { ...this.state.value }
                      onCompleted={ this.onTimeChange.bind(this) } />
                  </li>
                )
              }
              {
                this.props.fullscreen
                  ? (
                    <li>
                      <button
                        className="btn-blue btn-sm"
                        style={{
                          float:'right',
                          marginTop:'5px',
                          height:'30px'
                        }}
                        onClick={this.fullscreenHandler.bind(this)}>
                        <i className="iconfont" style={{lineHeight:'18px'}}>&#xe603;</i>
                      </button>
                    </li>
                  ) : null
              }
            </ul>
          </div>
          <h2>{this.props.title}<sub>{this.props.subtitle}</sub></h2>
        </div>
        {this.props.children}
      </div>
    );
  }
}

Layout.defaultProps = {
  title:null,
  subtitle:null,
  onTimeChange:()=>{}
}
